
#wdu-message__container {
    position: fixed;
    top: 0;
    width: 100vw;
    pointer-events: none;
}

.wdu-message {
    width: max-content;
    background: white;
    margin: 15px auto;
    padding: 8px 20px;
    opacity: 0;
    position: relative;

    .wdu-text-normal();
    .out-shadow-normal();
    .wdu-radius-small();

    &__info {
        .wdu-raw-plain();
    }

    &__error {
        color: white;
        .wdu-raw-danger();
    }

    &__success {
        color: white;
        .wdu-raw-success();
    }

    &__warning {
        .wdu-raw-warn();
    }

    &__visible {
        opacity: 0;
        animation: visible 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 forwards;
    }

    &__hidden {
        opacity: 1;
        animation: hidden 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s 1 forwards;
    }
}

@keyframes visible {
    from {
        opacity: 0;
        top: -30px;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

@keyframes hidden {
    from {
        opacity: 1;
        top: 0;
    }

    to {
        opacity: 0;
        top: -30px;
    }
}